<template>
  <div>
    <el-table
        v-loading="loading"
        :data="songsList"
        :header-cell-style="{background:'#f7f7f7','textAlign':'center','borderBottomColor':'transparent'}"
        :cell-style="{textAlign:'center','borderBottomColor':'transparent'}"
        :row-class-name="rowName"
        @click.native="goPlay"
        style="width: 100%">
      <el-table-column
          type="index"
          label="序号"
          width="80">
      </el-table-column>
      <el-table-column
          prop="name"
          label="歌曲">
        <template #default="{row}">
          <span
              :data-img="row.al.picUrl"
              :id="row.id"
              :data-name="`${row.ar[0].name}-${row.name}`"
              style="cursor:pointer">{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="歌手">
        <template #default="{row}">
          {{ row.ar[0].name }}
        </template>
      </el-table-column>
      <el-table-column
          label="专辑">
        <template #default="{row}">
          《{{ row.al.name }}》
        </template>
      </el-table-column>
      <el-table-column
          label="时长">
        <template #default="{row}">
          <!-- 转换歌曲总时长-->
          {{ dayjs(row.dt).format('mm:ss') }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        style="text-align:center;margin-top: 40px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="options.currentPage"
        :page-sizes="[20, 25, 30, 35]"
        :page-size="options.pageSize"
        layout="prev, pager, next, jumper,->,total, sizes"
        :total="options.total">
    </el-pagination>
  </div>
</template>

<script>
import Mixins from "./Mixins";

export default {
  name: 'Songs',
  mixins: [Mixins],
  data() {
    return {
      songsList: [], // 要渲染的歌曲数据
      loading: false, // 数据未渲染完成时显示加载中
      options: {
        currentPage: 1, // 当前页码
        pageSize: 20, // 每页显示数据
        total: 0
      },
      offset: 0,// 分页使用
    }
  },
  watch: {
    // 侦听路由
    '$route.query': {
      handler() {
        this.deconstructData()
      },
      immediate: true
    }
  },
  methods: {
    async goPlay(e) {
      const id = e.target.id
      const name = e.target.dataset.name
      const img = e.target.dataset.img
      if (id) {
        // 传递歌曲id及封面图及歌手名
        this.$bus.$emit('play', {id,name,img})
      }
    },
    // 行的 className 的回调方法
    // rowIndex = 行索引
    rowName({row, rowIndex}) {
      //
      if (rowIndex % 2 !== 0) {
        return 'success-row';
      }
    },
    // 每页显示几条数据
    handleSizeChange(pageSize) {
      this.options.pageSize = pageSize
      this.deconstructData()
    },
    // 当前页码
    async handleCurrentChange(currentPage) {
      if (currentPage == 1) {
        this.offset = 0
      } else {
        this.offset = this.options.pageSize * (currentPage - 1)
      }
      this.options.currentPage = currentPage
      this.deconstructData()
    },
    // 解构数据
    async deconstructData() {
      const {options: {pageSize}, offset} = this
      let {songCount, songs} = await this.getSongs({pageSize, offset})
      if (!songs) {
        this.offset = 0
        this.$store.commit('UPD_SONG_list', true)
        this.options.total = songCount
        this.songsList = songs
        return
      }
      this.options.total = songCount
      this.songsList = songs
      this.$store.commit('UPD_SONG_list', false)
    }
  }
}
</script>

<style lang="less" scoped>
// 每行的颜色
/deep/ .el-table .success-row {
  background: #f7f7f7; //这里可以修改颜色
}

/deep/ .el-table::before {
  height: 0;
}

</style>
